<template>
  <div class="app-container">
    <div class="query-panel flex jc-between">
      <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery" />
      <el-form
        class="demo-form-inline"
      >
        <el-form-item>
          <el-input
            v-model="templateForm.name"
            placeholder="请输入充值方案名称"
            clearable
            style="width: 180px"
            class="mr-10"
          />
          <el-select
            v-model="templateForm.type"
            style="width: 160px"
            placeholder="请选择充值类型"
            class="mr-10"
          >
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
          <el-button v-hasPermi="['config:template:add']" class="add-template-btn" type="success" @click="handleTemplateAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="sky-nav">
      <div class="template-nav">
        <div class="title-panel">充值方案列表</div>
        <div class="template-panel" v-if="tableList.length > 0">
          <div
            v-for="el in tableList"
            :key="`${el.temp_id}_${el.id}`"
            class="template-item"
            :class="{'template-item-active': templateFormDetail.id === el.id}"
            @click="onClickTemplateItem(el)"
          >
            <p class="font-14 font-color-2">{{ el.name }}</p>
            <p class="font-14 font-color-2 mt-6">{{ el.updated_at }}更新</p>
          </div>
        </div>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryPage.pageNum"
          :limit.sync="queryPage.limit"
          @pagination="refreshInit"
        />

      </div>
      <div v-if="templateFormDetail.id" class="item-box">
        <div class="item-panel">
          <div class="flex jc-between pb-20">
            <div class="flex ai-center">
              <p class="font-18 font-color font-bold mr-10">{{ templateFormDetail.name }}</p>
              <a v-hasPermi="['config:template:edit']" href="javascript:;" @click="handleOpenTemplateEdit()">
                <i class="el-icon-edit" />
              </a>
            </div>
            <div class="flex ai-center">
              <div class="flex mr-10">
                <el-switch v-model="templateFormDetail.flag" v-hasPermi="['config:template:edit']" @change="handleChange()" />
              </div>
              <p class="font-16 font-color-2">ID：{{ templateFormDetail.id }}</p>
            </div>
          </div>
          <div class="flex jc-between ai-center">
            <div>
              <el-button-group>
                <el-button :type="templateFormDetail.isBeforePay == 2 ? 'primary' : 'default'" @click="handleUserTypeChange(2)">未充值用户
                </el-button>
                <el-button :type="templateFormDetail.isBeforePay == 1 ? 'primary' : 'default'" @click="handleUserTypeChange(1)">已充值用户
                </el-button>
              </el-button-group>
            </div>
            <el-tag v-if="templateFormDetail.type">{{ TEMPLATE_TYPE [templateFormDetail.type] }}</el-tag>
          </div>
          <div class="recharge-nav">
            <template v-if="templateFormDetail.isBeforePay === 2">
              <PriceItem
                v-for="(item, index) in templateFormDetail.no_pay_list"
                :key="`${templateFormDetail.id}_${item.isVip}_${item.id}`"
                :index="index"
                :item="item"
                :source-list="templateFormDetail.no_pay_list"
                @edit="handleUpdate(item)"
                @updateFlag="handleUpdateFlag(item)"
                @onSuccessSort="handleSuccessSort($event, 2)"
              />
            </template>
            <template v-else-if="templateFormDetail.isBeforePay === 1">
              <PriceItem
                v-for="(item, index) in templateFormDetail.is_pay_list"
                :key="`${templateFormDetail.id}_${item.isVip}_${item.id}`"
                :index="index"
                :item="item"
                :source-list="templateFormDetail.is_pay_list"
                @edit="handleUpdate(item)"
                @updateFlag="handleUpdateFlag(item)"
                @onSuccessSort="handleSuccessSort($event, 1)"
              />
            </template>
          </div>
          <div class="flex jc-center">
            <el-button v-hasPermi="['config:template:addVip', 'config:template:coinAdd']" class="mt-40" type="success" @click="handleAdd()">添加套餐</el-button>
          </div>
        </div>
      </div>

    </div>

    <!-- 修改模板名称对话框 -->
    <el-dialog
      title="修改套餐模板"
      :visible.sync="showTemplateEdit"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="formRefBig" :model="templateFormEdit" label-width="100px" @submit.native.prevent="handleSubmitTemplateEdit">
        <el-form-item label="套餐模板名称" prop="name">
          <el-input v-model="templateFormEdit.name" placeholder="请输入套餐模板名称" />
        </el-form-item>
        <el-form-item label="套餐充值类型" prop="type">
          <el-select
            v-model="templateFormEdit.type"
            style="width: 160px"
            placeholder="请选择充值类型"
            class="mr-10"
          >
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseTemplateEdit">取 消</el-button>
        <el-button type="primary" @click="handleSubmitTemplateEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="充值类型">
          <YxhySelect :columns="rechargeTypeColumns" :value.sync="rechargeTypeValue" :disabled="isEdit" @onChange="onChangeRechargeTypeValue" />
        </el-form-item>
        <div v-show="form.isFullCatalog === true">
          <!-- 充值类型：剧集会员 -->
          <el-form-item label="充值金额" prop="price">
            <el-input v-model="form.price" type="number" placeholder="请输入充值金额" />
          </el-form-item>
        </div>
        <div v-show="!form.isFullCatalog && form.isVip === true">
          <!-- 会员充值差异参数 -->
          <!-- 充值类型：剧集会员 -->
          <el-form-item label="会员期限" prop="duration">
            <el-input v-model="form.duration" type="number" placeholder="请输入正整数" />
          </el-form-item>
          <el-form-item label="会员期限类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">天</el-radio>
              <el-radio :label="2">月</el-radio>
              <el-radio :label="3">年</el-radio>
              <el-radio :label="4">永久</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="支付金额" prop="price">
            <el-input v-model="form.price" type="number" placeholder="请输入支付金额" />
          </el-form-item>
        </div>
        <div v-show="!form.isFullCatalog && form.isVip === false">
          <!-- 充值类型：金币充值 -->
          <el-form-item label="充值金额" prop="price">
            <el-input v-model="form.price" type="number" placeholder="请输入充值金额" />
          </el-form-item>
          <el-form-item label="充值金币" prop="recharge_coin">
            <el-input v-model="form.recharge_coin" type="number" placeholder="请输入充值金币" @change="intellectText1" />
          </el-form-item>
          <el-form-item label="赠送金币" prop="give_coin">
            <el-input v-model="form.give_coin" type="number" placeholder="请输入赠送金币" @change="intellectText2" />
          </el-form-item>
        </div>
        <el-form-item label="提示" prop="note">
          <el-input v-model="form.note" placeholder="请输入提示" />
        </el-form-item>
        <el-form-item label="提示2" prop="note_2">
          <el-input v-model="form.note_2" placeholder="请输入提示2" />
        </el-form-item>
        <el-form-item label="角标文案" prop="corner_marker">
          <el-input v-model="form.corner_marker" placeholder="请输入提示" />
        </el-form-item>
        <el-form-item label="背景高亮" prop="bg_type">
          <el-radio-group v-model="form.bg_type" @input="onInputBgType">
            <el-radio :label="1">高亮</el-radio>
            <el-radio :label="2">不高亮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角标图标" prop="corner_bg_style">
          <el-radio-group v-model="form.corner_bg_style">
            <el-radio :label="1">特惠</el-radio>
            <el-radio :label="2">新人</el-radio>
            <el-radio :label="3">热门</el-radio>
            <el-radio :label="4">会员</el-radio>
            <el-radio :label="5">普通</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.bg_type === 1">
          <el-form-item label="样式背景" prop="corner_style">
            <el-radio-group v-model="form.corner_style">
              <el-radio :label="1">橙</el-radio>
              <el-radio :label="2">蓝</el-radio>
              <el-radio :label="3">紫</el-radio>
              <el-radio :label="4">红</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="">
          <PriceItem :item="form" :show-action="false" />
          <div class="pt-22" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  addPackageCoin,
  addPackageVip,
  addTemplate,
  editPackageCoin,
  editPackageCoinFlag,
  editPackageVip,
  editPackageVipFlag,
  queryListTemplate,
  updateTemplate,
  TEMPLATE_TYPE, editPackageVipSort, editPackageCoinSort
} from '@/api/config/template'
import PriceItem from '@/views/config/template/components/PriceItem/index.vue'

export default {
  name: 'LibraryList',
  components: { PriceItem },
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        id: undefined,
        name: undefined,
        flag: undefined,
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入模板ID',
        type: 'input',
        param: 'id'
      }, {
        label: '',
        placeholder: '请输入模板名称',
        type: 'input',
        param: 'name'
      }, {
        label: '',
        placeholder: '状态',
        type: 'select',
        selectOptions: [{ name: '有效', value: 1 }, { name: '失效', value: 0 }], // 下拉框选项
        param: 'flag'
      }],
      loading: false,
      templateTypeOptions: [],
      TEMPLATE_TYPE,
      templateForm: {
        name: undefined,
        type: 1 // 套餐类型 充值类型，1-高冲 2-中充 3-低充
      },
      // 选中的充值方案
      templateFormDetail: {
        id: undefined,
        flag: undefined
      },
      templateFormEdit: {},
      showTemplateEdit: false,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        isVip: false, // 前端自定义 true会员充值  false金币充值
        isFullCatalog: false, // 前端自定义 true剧集会员
        temp_id: undefined,
        price: undefined,
        recharge_coin: undefined,
        give_coin: undefined,
        note: undefined,
        note_2: undefined,
        corner_marker: undefined,
        bg_type: 2,
        user_type: undefined,
        corner_style: undefined, // 样式背景
        corner_bg_style: 5, // 角标图标

        // 会员充值差异参数
        duration: undefined,
        type: 1
      },
      // 表单校验
      rules: {
        price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value && this.form.isFullCatalog) {
                callback(new Error('请输入充值金额'))
              } else if (!value && this.form.isVip === false) {
                callback(new Error('请输入充值金额'))
              } else if (!value && this.form.isVip === true) {
                callback(new Error('请输入支付金额'))
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ],
        recharge_coin: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.form.isFullCatalog) {
                callback()
              } else if (!value && this.form.isVip === false) {
                callback(new Error('请输入充值金币'))
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ],
        duration: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.form.isFullCatalog || this.form.isVip === false) {
                callback()
              } else if (!value && this.form.isVip === true) {
                callback(new Error('请输入会员期限'))
              } else if (Number(value) < 0 || Math.ceil(value) !== Number(value)) {
                callback(new Error('请输入正整数'))
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ]
      },
      rechargeTypeColumns: [{ value: '0', label: '金币充值' }, { value: '1', label: '会员充值' }, { value: '2', label: '剧集会员' }],
      rechargeTypeValue: '0', // 0金币充值，1会员充值, 2全剧观看
      selectedPayType: 2, // 2未充值用户，1已充值用户

      // 拖拽排序
      dragOldData: {},
      dragNewData: {}
    }
  },
  computed: {
    isEdit() {
      return ![undefined, null].includes(this.form.id)
    }
  },
  async created() {
    this.setTemplateTypeOptions()
    await this.init()
  },
  methods: {
    // 表格数据源
    async init() {
      this.loading = true
      this.queryParams.flag = this.queryParams.flag !== '' ? this.queryParams.flag : undefined
      const res = await queryListTemplate({
        ...this.queryPage,
        ...this.queryParams
      })
      const newRes = res.data.map(e => {
        const { coin_package_by_pay, coin_package_by_no_pay, vip_package_by_pay, vip_package_by_no_pay } = e
        e.flag = e.flag === 1
        coin_package_by_pay.forEach(e => {
          const { price, vip_type, bg_type, corner_style, corner_bg_style } = e
          // Number会自动去掉小数点后面的0
          e.price = Number(price)
          e.isVip = false
          const isHighlight = bg_type === 1
          e.corner_style = isHighlight ? corner_style || 1 : corner_style
          e.corner_bg_style = corner_bg_style || 5
        })
        coin_package_by_no_pay.forEach(e => {
          const { price, vip_type, bg_type, corner_style, corner_bg_style } = e
          e.price = Number(price)
          e.isVip = false
          const isHighlight = bg_type === 1
          e.corner_style = isHighlight ? corner_style || 1 : corner_style
          e.corner_bg_style = corner_bg_style || 5
        })
        vip_package_by_pay.forEach(e => {
          const { price, vip_type, bg_type, corner_style, corner_bg_style } = e
          e.price = Number(price)
          e.isVip = true
          e.isFullCatalog = vip_type === 2
          const isHighlight = bg_type === 1
          e.corner_style = isHighlight ? corner_style || 1 : corner_style
          e.corner_bg_style = corner_bg_style || 1
        })
        vip_package_by_no_pay.forEach(e => {
          const { price, vip_type, bg_type, corner_style, corner_bg_style } = e
          e.price = Number(price)
          e.isVip = true
          e.isFullCatalog = vip_type === 2
          const isHighlight = bg_type === 1
          e.corner_style = isHighlight ? corner_style || 1 : corner_style
          e.corner_bg_style = corner_bg_style || 1
        })
        const no_pay_list = [...coin_package_by_no_pay, ...vip_package_by_no_pay].sort((a, b) => a.sort - b.sort)
        const is_pay_list = [...coin_package_by_pay, ...vip_package_by_pay].sort((a, b) => a.sort - b.sort)
        return {
          ...e,
          isBeforePay: this.selectedPayType,
          no_pay_list,
          is_pay_list
        }
      })
      console.log('处理后列表数据源：', newRes)
      this.tableList = newRes
      this.total = res.total
      this.loading = false
    },
    compareFn(a, b) {
      return a - b
    },
    // 刷新充值方案，并且清空右侧充值模板数据
    async refreshInit() {
      this.templateFormDetail = {}
      await this.init()
      this.refreshTemplateItem()
    },
    setTemplateTypeOptions() {
      for (const [key, name] of Object.entries(TEMPLATE_TYPE)) {
        this.templateTypeOptions.push({
          name: name,
          value: Number(key)
        })
      }
    },
    // 拖拽排序前的数组
    onDragstart(item) {
      this.dragOldData = item
    },
    // 拖拽排序后的数组
    onDragenter(value, e) {
      this.dragNewData = value
      e.preventDefault()
    },
    // 拖拽最后操作
    onDragend(item, e) {
      setTimeout(() => {
        this.$nextTick(() => {
          console.log(this.dragOldData.id, this.dragNewData.id)
        })
      }, 1000)
      // if (this.dragOldData == this.dragNewData) return
      //
      // if (this.templateFormDetail.isBeforePay === 2) {
      //   // 未充值用户
      //   const arrList = this.templateFormDetail.no_pay_list
      //   const oldIndex = arrList.indexOf(this.dragOldData)
      //   const newIndex = arrList.indexOf(this.dragNewData)
      //   const copyArrList = JSON.parse(JSON.stringify(arrList))
      //   copyArrList.splice(oldIndex, 1)
      //   copyArrList.splice(newIndex, 0, this.dragOldData)
      //   this.templateFormDetail.no_pay_list = copyArrList
      // } else {
      //   // 已充值用户
      // }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    onDragover(e) {
      e.preventDefault()
    },
    // 会员类型切换
    onChangeRechargeTypeValue(event) {
      this.reset()

      event = Number(event)
      this.form.isFullCatalog = event === 2
      this.form.isVip = event === 1
      this.form.vip_type = event === 1 ? 1 : event === 2 ? 2 : undefined
      this.form.bg_type = event === 0 ? 2 : 1
      this.form.corner_style = this.form.bg_type === 1 ? 1 : undefined
    },
    // 是否高亮切换
    onInputBgType(event) {
      if (event === 1) this.form.corner_style = 1
      else if (event === 2) this.form.corner_style = undefined
    },
    /** 左侧充值方案点击 */
    onClickTemplateItem(el) {
      this.templateFormDetail = el
      console.log(this.templateFormDetail)
    },
    /** 刷新右侧，套餐模板数据 */
    refreshTemplateItem() {
      if (!this.templateFormDetail.id) return

      const item = this.tableList.find(e => e.id === this.templateFormDetail.id)
      this.templateFormDetail = item
    },
    handleOpenTemplateEdit() {
      const { id, name, type } = this.templateFormDetail
      this.templateFormEdit = {
        id,
        name,
        type
      }
      this.showTemplateEdit = true
    },
    handleCloseTemplateEdit() {
      this.showTemplateEdit = false
    },
    /** 修改套餐模板 */
    async handleSubmitTemplateEdit() {
      if (!this.templateFormEdit.name) return this.$modal.msgError('请输入套餐模板名称')
      if (!this.templateFormEdit.type) return this.$modal.msgError('请选择充值类型')

      await updateTemplate(this.templateFormEdit)
      this.showTemplateEdit = false
      this.$modal.msgSuccess('修改成功')
      await this.init()
      this.templateFormEdit = {}
    },
    handleUserTypeChange(val) {
      // 2未充值用户 || 1已充值用户
      this.templateFormDetail.isBeforePay = val
      this.selectedPayType = val
    },
    // 自动补全“提示”
    intellectText1() {
      this.form.note = `${this.form.recharge_coin}金币`
    },
    // 自动补全“提示”
    intellectText2() {
      this.form.note = `${this.form.recharge_coin}+${this.form.give_coin}金币`
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.refreshInit()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.queryParams = {
        library_id_search: undefined,
        title_search: undefined,
        classify_search: undefined,
        is_publish_search: undefined
      }
      this.init()
    },
    /** 开关切换 */
    async handleChange() {
      const { flag, id } = this.templateFormDetail
      const transFlag = flag ? 1 : 0
      await updateTemplate({
        flag: transFlag,
        id
      })
      this.$modal.msgSuccess('操作成功')
      await this.init()
    },
    /** 添加模板按钮操作 */
    async handleTemplateAdd() {
      if (!this.templateForm.name) return this.$modal.msgError('请输入套餐模板名称')
      if (!this.templateForm.type) return this.$modal.msgError('请选择充值类型')
      await addTemplate(this.templateForm)
      this.$modal.msgSuccess('添加成功')
      await this.init()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        isVip: false, // 前端自定义
        temp_id: this.form.temp_id,
        price: undefined,
        recharge_coin: undefined,
        give_coin: undefined,
        note: undefined,
        note_2: undefined,
        corner_marker: undefined,
        bg_type: 2,
        user_type: this.form.user_type,
        corner_style: undefined, // 样式背景
        corner_bg_style: 5, // 角标图标

        duration: undefined,
        type: 1
      }
      this.resetForm('formRef')
    },
    /** 修改套餐操作 */
    handleUpdate(item) {
      const copyItem = JSON.parse(JSON.stringify(item))
      const { vip_type } = copyItem
      if (vip_type) {
        // 会员套餐，设置会员类型的值
        this.rechargeTypeValue = vip_type.toString()
        copyItem.isVip = this.rechargeTypeValue === '1'
        copyItem.isFullCatalog = this.rechargeTypeValue === '2'
      } else {
        this.rechargeTypeValue = '0'
        copyItem.isVip = false
      }

      this.form = copyItem
      console.log(this.form)
      this.open = true
      this.title = '修改套餐'
    },
    /** 添加套餐按钮操作 */
    async handleAdd() {
      const { id, isBeforePay, isVip } = this.templateFormDetail
      this.form.temp_id = id
      this.form.user_type = isBeforePay

      this.title = '添加套餐'
      this.rechargeTypeValue = '0'
      this.reset()
      this.open = true
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.form.give_coin = this.form.give_coin || undefined
          if (this.form.id != undefined) {
            this.editRequest()
          } else {
            this.addRequest()
          }
        }
      })
    },
    addRequest() {
      if (this.form.isFullCatalog) {
        this.form.vip_type = this.rechargeTypeValue
        this.form.duration = 0
        addPackageVip(this.form).then(res => {
          this.$modal.msgSuccess('添加成功')
          this.refreshPageData()
        })
      } else if (this.form.isVip) {
        addPackageVip(this.form).then(res => {
          this.$modal.msgSuccess('添加成功')
          this.refreshPageData()
        })
      } else {
        addPackageCoin(this.form).then(res => {
          this.$modal.msgSuccess('添加成功')
          this.refreshPageData()
        })
      }
    },
    editRequest() {
      if (this.form.isFullCatalog) {
        this.form.vip_type = this.rechargeTypeValue
        this.form.duration = 0
        editPackageVip(this.form).then(res => {
          this.$modal.msgSuccess('修改成功')
          this.refreshPageData()
        })
      } else if (this.form.isVip) {
        editPackageVip(this.form).then(res => {
          this.$modal.msgSuccess('修改成功')
          this.refreshPageData()
        })
      } else {
        editPackageCoin(this.form).then(res => {
          this.$modal.msgSuccess('修改成功')
          this.refreshPageData()
        })
      }
    },
    async refreshPageData() {
      this.open = false
      await this.init()
      this.refreshTemplateItem()
    },
    /** 修改套餐状态按钮操作 */
    handleUpdateFlag(item) {
      const { id, flag, isVip } = item
      const transFlag = flag === 1 ? 0 : 1
      if (isVip) {
        editPackageVipFlag({
          id,
          flag: transFlag
        }).then(res => {
          this.$modal.msgSuccess('操作成功')
          this.open = false
          this.init().then(() => {
            this.refreshTemplateItem()
          })
        })
      } else {
        editPackageCoinFlag({
          id,
          flag: transFlag
        }).then(res => {
          this.$modal.msgSuccess('操作成功')
          this.open = false
          this.init().then(() => {
            this.refreshTemplateItem()
          })
        })
      }
    },
    /** 排序 */
    handleSuccessSort(arr, isBeforePay) {
      if (isBeforePay === 2) {
        // 未充值用户
        this.templateFormDetail.no_pay_list = arr
      } else if (isBeforePay === 1) {
        // 已充值用户
        this.templateFormDetail.is_pay_list = arr
      }

      arr.forEach(e => {
        const { id, sort, isVip } = e
        if (isVip) {
          editPackageVipSort({
            id, sort
          })
        } else {
          editPackageCoinSort({
            id, sort
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.sky-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.template-nav {
  width: 45%;
  .title-panel {
    background-color: #f8f8f8;
    color: #333;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #dddddd;
    text-align: center;
  }
  .template-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #dddddd;
    padding: 0 20px 20px 20px;
    .template-item {
      border: 1px solid #dddddd;
      border-radius: 4px;
      width: 48%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 14px 0;
      margin-top: 20px;
      cursor: pointer;
    }
    .template-item-active {
      border: 1px solid #1890ff;
      p {
        color: #1890ff;
      }
    }
  }

}

.item-box {
  width: 45%;
  margin-right: 80px;
  .item-panel {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
  }
}
.recharge-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  height: 440px;
  max-height: 700px;
}

@media (max-width: 768px) {
  .template-nav {
    width: 100%;
  }

  .item-box {
    margin-top: 22px;
    margin-right: 0;
    width: 100%;
  }

  .add-template-btn {
    margin-top: 22px;
  }
}
//
//.item-box {
//  column-count: 3;
//  column-gap: 20px;
//
//  .item-panel {
//    break-inside: avoid;
//    border: 1px solid #ddd;
//    padding: 10px;
//    margin-bottom: 20px;
//    display: flex;
//    flex-direction: column;
//  }
//
//}
//
//.recharge-nav {
//  display: flex;
//  flex-wrap: wrap;
//  justify-content: space-between;
//  height: fit-content;
//  margin-top: 20px;
//  margin-bottom: 20px;
//}
</style>
